<template>
	<view class="content">
		<view class="cz_content">
			<view class="top flex">
				<image :src="src1" mode="" class="img"></image>
				<view class="title">
					{{title}}
				</view>
				<view class="title1">
					{{title1}}
				</view>
			</view>
			<view class="bottom">
				<view class="bottom_top"  @click="open()">
					如何让退款
				</view>
				<uni-popup ref="popup" :mask-click="false" class="box" maskClick="true">
					<view class="box1">
						<p>400-0835-999</p>
						<p>取消</p>
						
					</view>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				src1:'/static/images/collect.gif',
				title:'您当前未拥有车主权益卡立即加油 享受优惠',
				title1:'立即加油',
				remnant:0
			}
		},
		methods:{
			open() {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			descInput: function(e) {
				console.log(e)
				this.remnant = e.detail.cursor
			},
		}
	}
</script>

<style>
	page{position: relative;}
	.bottom_top{color: blue;text-decoration: underline;text-align: center;position: absolute;bottom: 20rpx;left: 300rpx;}
	.flex{display: flex;flex-direction: column;align-items: center;}
	.cz_content{width:60%;margin: 200rpx auto;text-align: center;vertical-align: middle;}
	.img{display: block;width:100rpx;height: 100rpx;}
	.title{color: #c8c8c8;font-size: 40rpx;margin: 20rpx 0rpx;}
	.title1{color: aliceblue;width:200rpx;line-height: 50rpx;background-color: #f00;margin-top: 40rpx;}
	.box1{background-color: #fff;}
	.box1 p{border-bottom:#ccc 1px solid;color: #666;padding:20rpx;width:90%;}
</style>